<template>
  <div style="width: 1200px;margin: 0 auto">
    <h1 style="color: #494949;font-size: 26px">最新的影评</h1>
    <el-menu mode="horizontal" active-text-color="blue" default-active="1" style="border: #0aa1ed" router>
      <el-menu-item index="/best">最受欢迎的影评</el-menu-item>
      <el-menu-item index="latest">最新的影评</el-menu-item>
    </el-menu>
    <div>
      <el-row v-for="c in commentArr">
        <el-col :span="6">
          <div style="text-align: center">
            <img :src="c.imgUrl" style="width: 100px;height: 100%">
          </div>
        </el-col>
        <el-col :span="18">
          <router-link to="/DetailComment" style="text-decoration: none">
            <p>{{c.title}}</p>
          </router-link>
          <p style="font-size: 15px;color: #666">
            <el-avatar src="/imgs/logo.png" :size="25"></el-avatar>
            作者:{{c.author}} | 发布时间:{{c.time}}| 阅读次数:{{c.viewCount}}
          </p>
        </el-col>
        <hr>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
const commentArr = ref ([
  {
    "imgUrl":"/imgs/img.png",
    "title":"被遗忘的大多数——春天的放牛班第84期镇故事集》",
    "author":"传奇哥",
    "time":"2023/8/9 15:40:50",
    "viewCount":"356"
  },
  {
    "imgUrl":"/imgs/img.png",
    "title":"被遗忘的大多数——春天的放牛班第84期周限定《永安镇故事集》",
    "author":"传哥",
    "time":"2023/8/9 15:40:50",
    "viewCount":"356"
  },
  {
    "imgUrl":"/imgs/img.png",
    "title":"被遗忘的大多数——春天的放牛班第84期周限定《永安镇故事集》",
    "author":"传奇",
    "time":"2023/8/9 15:40:50",
    "viewCount":"356"
  },
  {
    "imgUrl":"/imgs/img.png",
    "title":"被遗忘的大多数——春天的放牛班第84期周限定《永安镇故事集》",
    "author":"传奇哥",
    "time":"2023/8/9 15:40:50",
    "viewCount":"356"
  },
  {
    "imgUrl":"/imgs/img.png",
    "title":"被遗忘的大多数——春天的放牛班第84期周限定《永安镇故事集》",
    "author":"传奇哥",
    "time":"2023/8/9 15:40:50",
    "viewCount":"356"
  },
  {
    "imgUrl":"/imgs/img.png",
    "title":"被遗忘的大多数——春天的放牛班第84期镇故事集》",
    "author":"传奇哥",
    "time":"2023/8/9 15:40:50",
    "viewCount":"356"
  },
  {
    "imgUrl":"/imgs/img.png",
    "title":"被遗忘的大多数——春天的放牛班第84期周限定《永安镇故事集》",
    "author":"传哥",
    "time":"2023/8/9 15:40:50",
    "viewCount":"356"
  },
  {
    "imgUrl":"/imgs/img.png",
    "title":"被遗忘的大多数——春天的放牛班第84期周限定《永安镇故事集》",
    "author":"传奇",
    "time":"2023/8/9 15:40:50",
    "viewCount":"356"
  },
  {
    "imgUrl":"/imgs/img.png",
    "title":"被遗忘的大多数——春天的放牛班第84期周限定《永安镇故事集》",
    "author":"传奇哥",
    "time":"2023/8/9 15:40:50",
    "viewCount":"356"
  },
  {
    "imgUrl":"/imgs/img.png",
    "title":"被遗忘的大多数——春天的放牛班第84期周限定《永安镇故事集》",
    "author":"传奇哥",
    "time":"2023/8/9 15:40:50",
    "viewCount":"356"
  },
])

</script>

<style scoped>

</style>